<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-box-widget" (mouseleave)="mouseoutWidget()">
  <!-- Top Control -->
  <div *ngIf="isAuthMgmtViewMode" class="ddp-top-control ddp-clear"
       [ngStyle]="{'margin-right': isVisibleScrollbar ? '20px' : '' }">
    <div class="ddp-ui-buttons">
      <div class="ddp-box-btn2" (click)="editWidget()">
        <em class="ddp-icon-widget-edit"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info">
          <em class="ddp-icon-view-down"></em>
          {{  'msg.comm.ui.edit' | translate }}
        </div>
        <!-- //툴팁 -->
      </div>
    </div>
  </div>
  <!-- // Top Control -->

  <div *ngIf="filter" #filterWidget class="ddp-view-widget ddp-view-widget-filter">
    <div class="ddp-ui-top">
      <!-- no filter -->
      <span class="ddp-no-filter" *ngIf="isViewMode && isNoFiltering()">
        <em class="ddp-icon-info"></em>{{ 'msg.comm.ui.no.filtering' | translate }}
      </span>
      <!-- //no filter -->
      <!-- title -->
      <div *ngIf="isViewMode && isShowTitle" class="ddp-ui-title">
        <em class="ddp-icon-filter"></em>
        {{getWidgetName()}}
      </div>
      <!-- //title -->
    </div>

    <!-- 차원값 필터 -->
    <div *ngIf="filter.type === 'include'" [ngStyle]="{ 'top' : isShowTitle ? '38px' : '0px' }"
         class="ddp-ui-widget-contents">
      <!-- 단일 선택 콤보 박스 -->
      <component-filter-select *ngIf="convertToIncludeFilter(filter).selector === inclusionSelectorType.SINGLE_COMBO
                                            || convertToIncludeFilter(filter).selector === inclusionSelectorType.MULTI_COMBO"
                               [array]="candidateList"
                               [selectedItems]="selectedItems"
                               [viewKey]="'name'"
                               [mockup]="isEditMode"
                               [filter]="filter"
                               [dashboard]="dashboard"
                               (onSelected)="onSelectInclude($event)"
                               (onCheckAll)="checkAllInclude()"
                               (changeDisplayOptions)="toggleOptionsSelectComp($event)">
      </component-filter-select>
      <!-- // 단일 선택 콤보 박스 -->

      <!-- 목록형 검색 영역 -->
      <div *ngIf="isViewMode && isSearchingCandidateAvailability
                    && (convertToIncludeFilter(filter).selector === inclusionSelectorType.MULTI_LIST
                      || convertToIncludeFilter(filter).selector === inclusionSelectorType.SINGLE_LIST)"
           class="ddp-list-search-candidate">
        <div class="ddp-search-text">
          <input type="text" class="ddp-input-search" [(ngModel)]="searchText">
        </div>
        <a (click)="candidateFromSearchText()" class="ddp-btn-line">{{'msg.comm.ui.search-all' | translate}}</a>
      </div>

      <!-- 복수 선택 목록 -->
      <ul *ngIf="convertToIncludeFilter(filter).selector === inclusionSelectorType.MULTI_LIST"
          class="ddp-list-checktype" >
        <li>
          <label class="ddp-label-checkbox">
            <input type="checkbox" (click)="checkAllInclude($event)"
                   [disabled]="isEditMode"
                   [checked]="convertToIncludeFilter(filter).valueList.length > 0
                   && convertToIncludeFilter(filter).valueList.length === candidateList.length">
            <i class="ddp-icon-checkbox ddp-dark"></i>
            <span class="ddp-txt-checkbox">({{'msg.board.filter.ui.all' | translate}})</span>
          </label>
        </li>
        <li *ngFor="let item of candidateList">
          <label class="ddp-label-checkbox">
            <input type="checkbox" (click)="onSelectInclude(item)"
                   [disabled]="isEditMode"
                   [checked]="convertToIncludeFilter(filter).valueList.indexOf(item.name) > -1">
            <i class="ddp-icon-checkbox ddp-dark"></i>
            <span class="ddp-txt-checkbox" [ngStyle]="item.isTemporary ? {'color': '#9499c2'} : {}">{{item.name}}</span>
          </label>
        </li>
      </ul>
      <!-- // 복수 선택 목록 -->
      <!-- 단일 선택 목록 -->
      <ul *ngIf="convertToIncludeFilter(filter).selector === inclusionSelectorType.SINGLE_LIST"
          class="ddp-list-checktype" >
        <li>
          <label class="ddp-label-radio">
            <input type="radio" name="{{filter.field + widget.id}}" (click)="checkAllInclude($event)"
                   [disabled]="isEditMode"
                   [checked]="convertToIncludeFilter(filter).valueList.length === 0">
            <i class="ddp-icon-radio"></i>
            <span class="ddp-txt-radio">({{'msg.board.filter.ui.all' | translate}})</span>
          </label>
        </li>
        <li *ngFor="let item of candidateList">
          <label class="ddp-label-radio">
            <input type="radio" name="{{filter.field + widget.id}}" (click)="onSelectInclude(item)"
                   [disabled]="isEditMode"
                   [checked]="convertToIncludeFilter(filter).valueList.indexOf(item.name) > -1">
            <i class="ddp-icon-radio"></i>
            <span class="ddp-txt-radio" [ngStyle]="item.isTemporary ? {'color': '#9499c2'} : {}">{{item.name}}</span>
          </label>
        </li>
      </ul>
      <!-- // 단일 선택 목록 -->
    </div>
    <!-- // 차원값 필터 -->
    <!-- 측정값 필터 -->
    <div *ngIf="filter.type === 'bound'" [ngStyle]="{ 'top' : isShowTitle ? '38px' : '0px' }"
         class="ddp-ui-widget-contents" >
      <div class="ddp-display-table" >
        <div class="ddp-table-in" >
          <bound-filter [filter]="filter" (changeFilterData)="applyValue()"></bound-filter>
        </div>
      </div>
    </div>
    <!-- // 측정값 필터 -->
    <!-- Timestamp Filter -->
    <div *ngIf="isTimeFilter" [ngStyle]="{
      'top' : ( isShowTitle ? ( ( isRelativeTypeTimeFilter ) ? '47px' : '39px' ) : '0px' ),
      'padding-top' : ( ( isListTypeTimeFilter || isDiscontinuousFilter ) ? '0px' : '' )
    }" class="ddp-ui-widget-contents wrap-time-filter" >

<!--
      <div class="ddp-toggle">
        <ul class="ddp-list-buttons">
          <li (click)="setTimeRangeFilter()" [class.ddp-selected]="isRangeTypeTimeFilter">Absolute</li>
          <li (click)="setTimeRelativeFilter()" [class.ddp-selected]="isRelativeTypeTimeFilter">Relative</li>
        </ul>
      </div>
-->

      <!-- 전체 기간 선택 탭 영역 -->
      <div class="ddp-filter-view ddp-full" >
        <span *ngIf="isAllTypeTimeFilter" class="ddp-txt-preview">(No time filtering)</span>
      </div>
      <!-- // 전체 기간 선택 탭 영역 -->

      <!-- Relative Time Filter -->
      <div *ngIf="isRelativeTypeTimeFilter" class="ddp-filter-view ddp-full">
        <app-time-relative-filter
          [mode]="'WIDGET'" [filter]="filter" [dashboard]="widget.dashBoard"
          (changeEvent)="changeFilterEvent($event)">
        </app-time-relative-filter>
      </div>
      <!-- // Relative Time Filter -->

      <!-- Range Time Filter -->
      <app-time-range-filter
        *ngIf="isRangeTypeTimeFilter"
        [mode]="'WIDGET'" [filter]="filter" [dashboard]="widget.dashBoard"
        (changeEvent)="changeFilterEvent($event)">
      </app-time-range-filter>
      <!-- // Range Time Filter -->

      <!-- Range Time Filter -->
      <app-time-date-filter
        *ngIf="isSingleTypeTimeFilter"
        [mode]="'WIDGET'" [filter]="filter" [dashboard]="widget.dashBoard"
        (changeEvent)="changeFilterEvent($event)">
      </app-time-date-filter>
      <!-- // Range Time Filter -->

      <!-- List Time Filter -->
      <app-time-list-filter
        *ngIf="isListTypeTimeFilter || isDiscontinuousFilter"
        [mode]="'WIDGET'" [filter]="filter"
        [dashboard]="widget.dashBoard" [field]="field"
        (change)="changeFilterEvent($event)">
      </app-time-list-filter>
      <!-- // List Time Filter -->

    </div>
    <!-- // Timestamp Filter -->
  </div>

  <!-- Error 표시 영역 -->
  <error-widget [isShow]="isError"
                [iconClass]="'ddp-chart-filter'"
                [widgetName]="getWidgetName()"
                [errorInfo]="errorInfo"></error-widget>
  <!-- // Error 표시 영역 -->

  <!-- 수정 버튼 레이어 -->
  <div *ngIf="isEditMode" class="ddp-hover-edit">
    <div class="ddp-hover-edit-in" >
      <a (click)="editWidget()" href="javascript:" class="ddp-btn-edit" ></a>
    </div>
  </div>
  <!-- // 수정 버튼 레이어 -->
</div>
